<template>
  <el-container>
    <el-main>
      <el-form :model="tollSearchForm" ref="tollSearchForm" :label-position="labelPosition" label-width="60px">
        <el-row class="headSearch">条件检索</el-row>
        <el-row class="rr">
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
            <el-form-item prop="dwName" label-width="0">
              <el-input prefix-icon="el-icon-search" type="text" v-model="tollSearchForm.dwName" @click.native="openDw" readonly placeholder="请选择单位"/>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
            <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
          </el-col>
        </el-row>
        <collapse-vertical>
          <el-row class="rr" v-show="item3Seem">
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="chargeName" label="收费员">
                  <el-input type="text" v-model="tollSearchForm.chargeName" @click.native="openCharge" readonly placeholder="请选择收费员"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item prop="chargeState" label="状态">
                  <el-radio-group v-model="tollSearchForm.chargeState" placeholder="状态" clearable>
                    <el-radio v-for="item in state" :label="item.id">{{item.value}}</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="record_start" label="在职日期">
                  <el-date-picker v-model="tollSearchForm.time"
                                  type="daterange"
                                  range-separator="-"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="hidBtn">
                <el-button @click="submitForm()">查询</el-button>
                <el-button @click="resetForm('tollSearchForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <!--<el-button  icon="el-icon-arrow-down" @click="item3Seem = !item3Seem" type="text"></el-button>-->
          <!-- <el-button  icon="el-icon-arrow-up" @click="closeHidden" type="text"></el-button>-->
          <el-button style="border: none;background-color: transparent" size="small" @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-main>

  </el-container>
</template>

<script>
  import { selDictonary } from '../../../api/dictionary'
  import { selChargeData } from '../../../api/statisticalAnalysis/tollBusiness'
  import CollapseVertical from '../../../utils/collapseVertical'

  export default {
    name: 'tollBusinessForm',
    components: { CollapseVertical },
    props: ['dwName', 'charge', 'pageNum', 'pageSize'],
    data() {
      return {
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        labelPosition: 'left',
        state: [],
        tollSearchForm: {
          dwName: '',
          dwNo: '',
          chargeName: '',
          chargeNo: '',
          chargeState: '',
          time: ''
        }
      }
    },
    mounted: function() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'recordstate') {
            this.state = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    watch: {
      dwName: function(val) {
        this.tollSearchForm.dwNo = val.orgno
        this.tollSearchForm.dwName = val.orgname
      },
      charge: function(val) {
        this.tollSearchForm.chargeNo = val.recordno
        this.tollSearchForm.chargeName = val.name
      },
      pageNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      }
    },
    methods: {
      submitForm: function() {
        this.$emit('tableLoad', true)
        selChargeData(this.tollSearchForm, this.pageNum, this.pageSize).then(res => {
          this.$emit('tableData', res)
          this.$emit('tableLoad', false)
        })
      },
      resetForm: function(tollSearchForm) {
        this.$refs[tollSearchForm].resetFields()
      },
      openDw: function() {
        this.$emit('dwVisible', true)
      },
      openCharge: function() {
        this.$emit('chargeVisible', true)
      }
    }
  }
</script>

<style scoped>
  #slideRow{
    border: none;
  }
  .hidBtn{
    margin-left: 8px
  }
  .hidBtn .el-button{
    margin-top: 10px;
    width: 45px;
    height: 22px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #444444;
    padding: 3px 10.5px;
  }
  .el-main{
    padding: 0px;
    margin: 0;
  }
  .headSearch{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }
  .btnSearch1{
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }
  .rr{
    margin-left: 25px;
  }
  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }
  .el-main{
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .el-form-item{
    height: 48px;
    margin-bottom: 8px;
  }
</style>
